<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>谜域旋廊 - 创新升级版</title>
  <style>
    body {
      background: linear-gradient(135deg, #a5b4fc 0%, #f472b6 100%);
      font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
      margin: 0; padding: 0; color: #333; min-height: 100vh; overflow-x: hidden;
    }
    .container { max-width: 900px; margin: 0 auto; padding: 24px 8px 100px 8px; }
    .header { text-align: center; margin-bottom: 32px; color: white; }
    .header h1 { font-size: 2.3rem; margin-bottom: 8px; text-shadow: 0 2px 8px #6366f1aa; }
    .header .slogan { font-size: 1.13rem; opacity: 0.92; }
    .card { background: rgba(255,255,255,0.97); border-radius: 22px; box-shadow: 0 6px 24px #a5b4fc33; margin-bottom: 32px; padding: 28px 20px 22px 20px; position: relative; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
    .card:hover { box-shadow: 0 12px 36px #f472b633; transform: translateY(-2px) scale(1.01); }
    .card-title { font-size: 1.25rem; font-weight: bold; color: #6366f1; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; letter-spacing: 1px; }
    .card-desc { color: #f472b6; font-size: 1.05rem; margin-bottom: 12px; }
    .card-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 1.01rem; color: #6366f1; }
    .card-btns { display: flex; gap: 10px; margin-top: 10px; }
    .card-btn { background: linear-gradient(90deg,#6366f1,#f472b6); color: #fff; border: none; border-radius: 14px; font-size: 1rem; font-weight: 600; padding: 7px 22px; box-shadow: 0 2px 8px #a5b4fc33; cursor: pointer; transition: background 0.2s, transform 0.1s; }
    .card-btn:active { transform: scale(0.96); background: linear-gradient(90deg,#f472b6,#6366f1); }
    .maze-area, .neon-area, .chain-area { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; margin-bottom: 10px; }
    /* 飞行棋彩色圆形格子+虚线路径 */
    .maze-container { position: relative; width: 100%; height: 400px; background: linear-gradient(135deg,#e0e7ff 0%,#fbcfe8 100%); border-radius: 32px; overflow: hidden; margin-bottom: 20px; border: 2.5px solid #a5b4fc; box-shadow: 0 12px 48px #a5b4fc33; }
    .maze-grid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; pointer-events: none; }
    .maze-cell { position: absolute; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: bold; box-shadow: 0 2px 12px #a5b4fc33; z-index: 3; transition: box-shadow 0.2s, transform 0.1s; pointer-events: auto; }
    .maze-cell.start { background: radial-gradient(circle,#34d399 60%,#a7f3d0 100%); box-shadow: 0 0 24px #34d399cc, 0 0 0 8px #6ee7b744; animation: pulseStart 1.5s infinite alternate; color: #fff; }
    .maze-cell.end { background: radial-gradient(circle,#f472b6 60%,#f9a8d4 100%); box-shadow: 0 0 24px #f472b6cc, 0 0 0 8px #f472b644; animation: pulseEnd 1.5s infinite alternate; color: #fff; }
    .maze-cell.treasure { background: radial-gradient(circle,#fbbf24 60%,#fde68a 100%); color: #fff; }
    .maze-cell.trap { background: radial-gradient(circle,#ef4444 60%,#fecaca 100%); color: #fff; }
    .maze-cell.path { background: radial-gradient(circle,#a5b4fc 60%,#fbcfe8 100%); color: #6366f1; }
    @keyframes pulseStart { 0%{box-shadow:0 0 24px #34d399cc,0 0 0 8px #6ee7b744;} 100%{box-shadow:0 0 48px #34d399cc,0 0 0 16px #6ee7b744;} }
    @keyframes pulseEnd { 0%{box-shadow:0 0 24px #f472b6cc,0 0 0 8px #f472b644;} 100%{box-shadow:0 0 48px #f472b6cc,0 0 0 16px #f472b644;} }
    .maze-path-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
    /* 规则问号 */
    .rules-btn { position: absolute; right: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#a5b4fc,#f472b6); color: #fff; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px #a5b4fc33; }
    .rules-pop { display: none; position: absolute; right: 38px; top: 10px; background: #fff; color: #6366f1; border-radius: 14px; box-shadow: 0 4px 24px #a5b4fc33; padding: 18px 22px; font-size: 1.05rem; width: 320px; z-index: 20; line-height: 1.7; }
    .rules-btn:hover + .rules-pop, .rules-pop:hover { display: block; }
    /* 消消乐开始按钮 */
    #match3StartBtn { background: linear-gradient(90deg,#a5b4fc,#f472b6); color: #fff; border-radius: 14px; font-size: 1rem; font-weight: 600; padding: 7px 32px; margin: 0 8px 16px 8px; border: none; box-shadow: 0 2px 8px #a5b4fc33; transition: background 0.2s, transform 0.1s; cursor: pointer; }
    #match3StartBtn:active { background: linear-gradient(90deg,#f472b6,#a5b4fc); transform: scale(0.97); }
    .player { position: absolute; width: 32px; height: 32px; border-radius: 50%; z-index: 10; transition: all 0.5s cubic-bezier(.4,2,.6,1); display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 0 15px currentColor; font-size: 1.1rem; }
    .player-1 { background: linear-gradient(135deg, #6366f1, #818cf8); color: white; left: 5%; top: 5%; border: 3px solid #fff; }
    .player-2 { background: linear-gradient(135deg, #f472b6, #ec4899); color: white; left: 10%; top: 5%; border: 3px solid #fff; }
    .dice-area { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; background: rgba(30, 31, 58, 0.7); border-radius: 15px; }
    .dice-container { width: 100px; height: 100px; perspective: 1000px; margin: 0 auto; }
    .dice { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s; }
    .dice-face { position: absolute; width: 100%; height: 100%; background: white; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; color: #1a1b2e; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); border: 2px solid #e2e8f0; }
    .dice-face:nth-child(1) { transform: translateZ(50px); }
    .dice-face:nth-child(2) { transform: rotateX(180deg) translateZ(50px); }
    .dice-face:nth-child(3) { transform: rotateY(90deg) translateZ(50px); }
    .dice-face:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); }
    .dice-face:nth-child(5) { transform: rotateX(90deg) translateZ(50px); }
    .dice-face:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); }
    .roll-btn { background: linear-gradient(135deg, #6366f1, #818cf8); color: white; border: none; border-radius: 50px; padding: 15px 40px; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); }
    .roll-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(99, 102, 241, 0.6); }
    .roll-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .game-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(23, 24, 40, 0.95); padding: 30px 50px; border-radius: 20px; text-align: center; z-index: 100; border: 2px solid rgba(102, 126, 234, 0.5); box-shadow: 0 0 50px rgba(102, 126, 234, 0.5); display: none; }
    .message-title { font-size: 2.5rem; color: #fbbf24; margin-bottom: 20px; }
    .message-text { font-size: 1.3rem; margin-bottom: 30px; color: #e2e8f0; }
    .restart-btn { background: linear-gradient(135deg, #6366f1, #818cf8); color: white; border: none; border-radius: 50px; padding: 12px 35px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
    .restart-btn:hover { transform: scale(1.05); }
    .trap-effect { position: absolute; width: 100%; height: 100%; background: rgba(239, 68, 68, 0.5); z-index: 5; animation: trapPulse 1s ease-in-out; display: none; }
    @keyframes trapPulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } }
    .treasure-effect { position: absolute; width: 100%; height: 100%; background: rgba(251, 191, 36, 0.3); z-index: 5; animation: treasureGlow 1.5s ease-in-out; display: none; }
    @keyframes treasureGlow { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } }
    .particle { position: absolute; font-size: 1.5rem; animation: float 1.5s ease-out forwards; z-index: 20; }
    @keyframes float { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-100px) scale(0.5); } }
    .player-turn { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; }
    .turn-indicator { padding: 10px 20px; border-radius: 50px; font-weight: 600; transition: all 0.3s ease; }
    .player-1-turn { background: linear-gradient(135deg, #6366f1, #818cf8); box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); }
    .player-2-turn { background: linear-gradient(135deg, #f472b6, #ec4899); box-shadow: 0 0 15px rgba(244, 114, 182, 0.5); }
    .instructions { background: rgba(30, 31, 58, 0.7); border-radius: 15px; padding: 20px; margin-top: 20px; font-size: 1.1rem; line-height: 1.6; }
    .instructions h3 { color: #fbbf24; margin-bottom: 15px; font-size: 1.4rem; }
    .instructions ul { padding-left: 25px; margin-bottom: 15px; }
    .instructions li { margin-bottom: 10px; }
    .instructions p { color: #94a3b8; font-style: italic; }
    /* 消消乐 */
    .match3-board { display: grid; grid-template-columns: repeat(8, 36px); grid-template-rows: repeat(8, 36px); gap: 4px; background: #18181b; border-radius: 16px; box-shadow: 0 2px 8px #f472b633; margin: 0 auto; }
    .match3-cell { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; background: #fff3; transition: box-shadow 0.2s, transform 0.1s; box-shadow: 0 1px 8px #f472b6cc, 0 0 8px #fff3; border: 2px solid #fff2; }
    .match3-cell.selected { box-shadow: 0 0 24px 8px #fbbf24cc, 0 0 16px #fff; transform: scale(1.08); z-index: 2; border: 2px solid #fbbf24; }
    .match3-cell.red { background: linear-gradient(135deg,#f87171 60%,#fff0 100%); }
    .match3-cell.blue { background: linear-gradient(135deg,#60a5fa 60%,#fff0 100%); }
    .match3-cell.green { background: linear-gradient(135deg,#34d399 60%,#fff0 100%); }
    .match3-cell.yellow { background: linear-gradient(135deg,#fbbf24 60%,#fff0 100%); }
    .match3-cell.purple { background: linear-gradient(135deg,#a78bfa 60%,#fff0 100%); }
    .match3-score { color: #fbbf24; font-size: 1.1rem; margin: 10px 0 0 0; text-align: center; }
    @media (max-width: 600px) {
      .container { padding: 8px 2px 80px 2px; }
      .header h1 { font-size: 1.3rem; }
      .card { padding: 16px 6px 14px 6px; }
      .maze-container, .match3-board, .chain-canvas { width: 98vw; max-width: 340px; }
      .match3-board { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
    }
    .chain-card { min-height: 420px; }
    .chain-topbar { display: flex; justify-content: space-between; align-items: center; color: #4f46e5; font-size: 1.15rem; margin-bottom: 2px; font-weight: 500; letter-spacing: 1px; }
    .chain-title { color: #4f46e5; font-size: 1.35rem; font-weight: bold; margin-bottom: 6px; }
    .chain-desc { color: #f472b6; font-size: 1.08rem; margin-bottom: 10px; }
    .chain-canvas { display: grid; grid-template-columns: repeat(5, 54px); grid-template-rows: repeat(5, 54px); gap: 10px; background: radial-gradient(circle,#fffbe6 60%,#fde68a 100%); border-radius: 24px; box-shadow: 0 0 60px #fde68a88; padding: 18px; margin: 0 auto 10px auto; }
    .energy-ball { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 60% 40%,#fde68a 60%,#fbbf24 100%); box-shadow: 0 0 24px #fbbf24cc, 0 0 8px #fffbe6; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #fbbf24; cursor: pointer; transition: box-shadow 0.18s, transform 0.12s, background 0.18s; border: 2.5px solid #fffbe6; position: relative; }
    .energy-ball.activated { background: radial-gradient(circle at 60% 40%,#fffbe6 60%,#fde68a 100%); color: #fbbf24; box-shadow: 0 0 36px #fde68a, 0 0 12px #fffbe6; text-shadow: 0 0 12px #fde68a, 0 0 8px #fffbe6; }
    .energy-ball.inactive { background: radial-gradient(circle at 60% 40%,#23243a 60%,#a5b4fc 100%); color: #23243a; box-shadow: 0 0 8px #23243a88; }
    .energy-ball:active { transform: scale(0.93); box-shadow: 0 0 36px #fbbf24cc, 0 0 16px #fffbe6; }
    .chain-hint { color: #f472b6; font-size: 1.01rem; margin: 10px 0 0 0; text-align: center; }
    .chain-btn { background: linear-gradient(90deg,#a5b4fc,#f472b6); color: #fff; border-radius: 14px; font-size: 1rem; font-weight: 600; padding: 7px 32px; margin: 0 8px; border: none; box-shadow: 0 2px 8px #a5b4fc33; transition: background 0.2s, transform 0.1s; }
    .chain-btn:active { background: linear-gradient(90deg,#f472b6,#a5b4fc); transform: scale(0.97); }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>🌀 谜域旋廊</h1>
      <div class="slogan">飞行棋 · 消消乐 · 金色连锁</div>
    </div>

    <!-- 飞行棋玩法 -->
    <div class="card">
      <div class="card-title">🎲 迷宫寻宝飞行棋</div>
      <div class="card-desc">掷骰子前进，避开陷阱，收集宝藏，成为第一个到达终点的玩家！</div>
      <div class="game-board">
        <div class="board-header">
          <div class="game-title">迷宫寻宝飞行棋</div>
          <div class="game-info">
            <div class="info-item">
              <div class="info-label">当前回合</div>
              <div class="info-value" id="turn-count">1</div>
            </div>
            <div class="info-item">
              <div class="info-label">宝藏收集</div>
              <div class="info-value" id="treasure-count">0</div>
            </div>
          </div>
        </div>
        <div class="player-turn">
          <div class="turn-indicator player-1-turn" id="player1-indicator">玩家1的回合</div>
          <div class="turn-indicator" id="player2-indicator">玩家2</div>
        </div>
        <div class="maze-container">
          <svg class="maze-path-svg" id="mazePathSvg"></svg>
          <div class="rules-btn" id="rulesBtn">?</div>
          <div class="rules-pop" id="rulesPop">
            <b>飞行棋规则：</b><br>
            1. 玩家轮流掷骰子，根据点数在蛇形路径上前进。<br>
            2. 绿色为起点，粉色为终点。<br>
            3. 金色为宝藏，收集可获得奖励。<br>
            4. 红色为陷阱，踩中会后退。<br>
            5. 第一个到达终点的玩家获胜。<br>
            6. 电脑自动控制二号玩家。<br>
          </div>
          <div class="maze-grid" id="maze-grid"></div>
          <div class="player player-1" id="player1">P1</div>
          <div class="player player-2" id="player2">P2</div>
          <div class="particle-anim" id="particle-anim"></div>
        </div>
        <div class="dice-area">
          <div class="dice-container">
            <div class="dice" id="dice">
              <div class="dice-face">1</div>
              <div class="dice-face">2</div>
              <div class="dice-face">3</div>
              <div class="dice-face">4</div>
              <div class="dice-face">5</div>
              <div class="dice-face">6</div>
            </div>
          </div>
          <button class="roll-btn" id="roll-btn">掷骰子</button>
        </div>
        <div class="instructions">
          <h3>游戏规则</h3>
          <ul>
            <li>玩家轮流掷骰子，根据点数在迷宫中前进</li>
            <li>绿色格子为起点，红色格子为终点</li>
            <li>金色格子为宝藏，收集宝藏可获得额外奖励</li>
            <li>深红色格子为陷阱，踩中陷阱将受到惩罚</li>
            <li>第一个到达终点的玩家获胜</li>
            <li>陷阱效果：后退3步，暂停一回合</li>
            <li>宝藏效果：前进2步，额外获得一次掷骰机会</li>
          </ul>
          <p>提示：规划你的路径，避开陷阱，收集宝藏！</p>
        </div>
        <div class="game-message" id="game-message">
          <div class="message-title" id="message-title">游戏结束</div>
          <div class="message-text" id="message-text"></div>
          <button class="restart-btn" id="restart-btn">重新开始</button>
        </div>
      </div>
    </div>

    <!-- 消消乐玩法 -->
    <div class="card">
      <div class="card-title">💎 消消乐</div>
      <div class="card-desc">交换相邻宝石，形成3个及以上同色即可消除，获得分数！</div>
      <div class="neon-area">
        <div style="text-align:right;color:#6366f1;font-size:1.1rem;margin-bottom:4px;">倒计时：<span id="match3Timer">60s</span></div>
        <button id="match3StartBtn">开始</button>
        <div class="match3-board" id="match3Board"></div>
        <div class="match3-score" id="match3Score">分数：0</div>
        <div class="card-btns">
          <button class="card-btn" id="match3Reset">重置</button>
        </div>
      </div>
    </div>

    <!-- 元素连锁反应（金色球排列） -->
    <div class="card chain-card">
      <div class="chain-topbar">
        <span class="chain-level">关卡 <span id="chainLevel">1</span></span>
        <span class="chain-step">/ <span id="chainStep">0</span> / <span id="chainTotal">3</span></span>
        <span class="chain-move">步数：<span id="chainMove">0</span></span>
      </div>
      <div class="card-title chain-title">✨ 元素连锁反应</div>
      <div class="chain-desc">点击能量球，触发连锁变色，目标：全屏金色！</div>
      <div class="chain-area">
        <div class="chain-canvas" id="chainCanvas"></div>
        <div class="chain-hint">提示：尝试不同顺序，寻找最优连锁！</div>
        <div class="card-btns">
          <button class="card-btn chain-btn" id="chainReset">重置</button>
          <button class="card-btn chain-btn" id="chainNext">下一关</button>
        </div>
      </div>
    </div>
    <div class="particle-anim" id="particleAnim"></div>
  </div>
  <script>
    // ========== 飞行棋玩法 ==========
    let gameState = {
      currentPlayer: 1, // 当前玩家 (1 或 2)
      turnCount: 1,     // 回合计数
      treasureCount: 0, // 宝藏收集数量
      playerPositions: {1: 0, 2: 0}, // 玩家位置
      diceValue: 1,     // 骰子点数
      gameActive: true, // 游戏是否进行中
      aiDelay: 900      // AI行动延迟ms
    };
    const mazeConfig = [
      {type: 'start', effect: null}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'trap', effect: 'back'}, {type: 'path', effect: null}, {type: 'treasure', effect: 'bonus'}, {type: 'path', effect: null}, {type: 'path', effect: null},
      {type: 'trap', effect: 'back'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'treasure', effect: 'bonus'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'trap', effect: 'back'}, {type: 'path', effect: null},
      {type: 'treasure', effect: 'bonus'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'trap', effect: 'back'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'treasure', effect: 'bonus'}, {type: 'path', effect: null},
      {type: 'trap', effect: 'back'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'treasure', effect: 'bonus'}, {type: 'path', effect: null}, {type: 'path', effect: null}, {type: 'end', effect: 'win'}
    ];
    function drawMazePath() {
      const svg = document.getElementById('mazePathSvg');
      svg.innerHTML = '';
      const container = document.querySelector('.maze-container');
      const w = container.offsetWidth, h = container.offsetHeight;
      const pathIdx = [];
      for(let i=0;i<32;i++) pathIdx.push(i);
      let points = [];
      for(let i=0;i<pathIdx.length;i++){
        const idx = pathIdx[i];
        const row = Math.floor(idx/8), col = idx%8;
        let x = col, y = row;
        if(row%2===1) x = 7-col;
        const px = 18 + x*(w-36)/7;
        const py = 18 + y*(h-36)/7;
        points.push({x:px,y:py});
      }
      if(points.length>1){
        let d = '';
        for(let i=0;i<points.length;i++){
          if(i===0) d+=`M${points[i].x},${points[i].y}`;
          else {
            const prev = points[i-1];
            const c1x = prev.x + (points[i].x-prev.x)*0.4;
            const c1y = prev.y + (points[i].y-prev.y)*0.4;
            const c2x = points[i].x - (points[i].x-prev.x)*0.4;
            const c2y = points[i].y - (points[i].y-prev.y)*0.4;
            d+=` C${c1x},${c1y} ${c2x},${c2y} ${points[i].x},${points[i].y}`;
          }
        }
        let path = document.createElementNS('http://www.w3.org/2000/svg','path');
        path.setAttribute('d',d);
        path.setAttribute('stroke','#a5b4fc');
        path.setAttribute('stroke-width','7');
        path.setAttribute('fill','none');
        path.setAttribute('stroke-dasharray','12 10');
        path.setAttribute('opacity','0.35');
        path.setAttribute('stroke-linecap','round');
        path.setAttribute('stroke-linejoin','round');
        svg.appendChild(path);
      }
    }
    window.addEventListener('resize',()=>{setTimeout(drawMazePath,300);setTimeout(createMazeGrid,300);});
    function initGame() {
      gameState = { currentPlayer: 1, turnCount: 1, treasureCount: 0, playerPositions: {1: 0, 2: 0}, diceValue: 1, gameActive: true, aiDelay: 900 };
      updateUI();
      createMazeGrid();
      positionPlayers();
      document.getElementById('game-message').style.display = 'none';
    }
    function createMazeGrid() {
      const mazeGrid = document.getElementById('maze-grid');
      mazeGrid.innerHTML = '';
      const container = document.querySelector('.maze-container');
      const w = container.offsetWidth, h = container.offsetHeight;
      const pathIdx = [];
      for(let i=0;i<32;i++) pathIdx.push(i);
      for(let i=0;i<pathIdx.length;i++){
        const idx = pathIdx[i];
        const row = Math.floor(idx/8), col = idx%8;
        let x = col, y = row;
        if(row%2===1) x = 7-col;
        // 计算圆心坐标
        const px = 18 + x*(w-36)/7;
        const py = 18 + y*(h-36)/7;
        const cell = document.createElement('div');
        cell.className = 'maze-cell';
        const type = mazeConfig[idx].type;
        cell.classList.add(type||'path');
        cell.style.left = (px-22)+'px';
        cell.style.top = (py-22)+'px';
        // 只显示起点和终点图标，宝藏/陷阱初始不显示
        if(type==='start') cell.innerHTML='🚩';
        else if(type==='end') cell.innerHTML='🏁';
        else cell.innerHTML='';
        mazeGrid.appendChild(cell);
      }
    }
    function positionPlayers() {
      const player1 = document.getElementById('player1');
      const player2 = document.getElementById('player2');
      const startCell = document.querySelector('.maze-cell.start');
      if (startCell) {
        const rect = startCell.getBoundingClientRect();
        const containerRect = document.querySelector('.maze-container').getBoundingClientRect();
        player1.style.left = (rect.left - containerRect.left + rect.width/2 - 15) + 'px';
        player1.style.top = (rect.top - containerRect.top + rect.height/2 - 15) + 'px';
        player2.style.left = (rect.left - containerRect.left + rect.width/2 + 5) + 'px';
        player2.style.top = (rect.top - containerRect.top + rect.height/2 - 15) + 'px';
      }
      setTimeout(drawMazePath, 200);
    }
    function updateUI() {
      document.getElementById('turn-count').textContent = gameState.turnCount;
      document.getElementById('treasure-count').textContent = gameState.treasureCount;
      if (gameState.currentPlayer === 1) {
        document.getElementById('player1-indicator').classList.add('player-1-turn');
        document.getElementById('player2-indicator').classList.remove('player-2-turn');
      } else {
        document.getElementById('player1-indicator').classList.remove('player-1-turn');
        document.getElementById('player2-indicator').classList.add('player-2-turn');
      }
    }
    function rollDice() {
      if (!gameState.gameActive) return;
      const dice = document.getElementById('dice');
      const rollBtn = document.getElementById('roll-btn');
      rollBtn.disabled = true;
      const diceValue = Math.floor(Math.random() * 6) + 1;
      gameState.diceValue = diceValue;
      let rolls = 0;
      const maxRolls = 10;
      const rollInterval = setInterval(() => {
        const randomValue = Math.floor(Math.random() * 6) + 1;
        dice.style.transform = `rotateX(${Math.floor(Math.random() * 360)}deg) rotateY(${Math.floor(Math.random() * 360)}deg)`;
        dice.children[0].textContent = randomValue;
        rolls++;
        if (rolls >= maxRolls) {
          clearInterval(rollInterval);
          dice.style.transform = `rotateX(${diceValue * 60}deg) rotateY(${diceValue * 60}deg)`;
          dice.children[0].textContent = diceValue;
          setTimeout(() => { movePlayer(); }, 500);
        }
      }, 100);
    }
    function movePlayer() {
      const playerId = `player${gameState.currentPlayer}`;
      const player = document.getElementById(playerId);
      let currentPosition = gameState.playerPositions[gameState.currentPlayer];
      const targetPosition = Math.min(currentPosition + gameState.diceValue, mazeConfig.length - 1);
      const cells = document.querySelectorAll('.maze-cell');
      // 逐步移动
      function stepMove(pos) {
        const cell = cells[getCellIndex(pos)];
        if (cell) {
          const rect = cell.getBoundingClientRect();
          const containerRect = document.querySelector('.maze-container').getBoundingClientRect();
          player.style.left = (rect.left - containerRect.left + rect.width/2 - 15) + 'px';
          player.style.top = (rect.top - containerRect.top + rect.height/2 - 15) + 'px';
        }
      }
      function animateMove(pos) {
        if (pos > targetPosition) return;
        stepMove(pos);
        gameState.playerPositions[gameState.currentPlayer] = pos;
        if (pos < targetPosition) {
          setTimeout(()=>animateMove(pos+1), 350);
        } else {
          setTimeout(()=>{ checkCellEffect(pos); }, 500);
        }
      }
      animateMove(currentPosition+1);
    }
    function getCellIndex(position) {
      const row = Math.floor(position / 8);
      const col = position % 8;
      if (row % 2 === 0) { return row * 8 + col; } else { return row * 8 + (7 - col); }
    }
    function checkCellEffect(position) {
      const cell = mazeConfig[position];
      const playerId = gameState.currentPlayer;
      const player = document.getElementById(`player${playerId}`);
      const cells = document.querySelectorAll('.maze-cell');
      const cellDiv = cells[getCellIndex(position)];
      if (cell.type === 'treasure') {
        // 临时显示宝藏
        if(cellDiv) { cellDiv.innerHTML = '💰'; setTimeout(()=>{cellDiv.innerHTML='';}, 1200); }
        gameState.treasureCount++;
        showParticles(player, '💰', '收集宝藏！前进2步');
        const treasureEffect = document.getElementById('treasure-effect');
        treasureEffect.style.display = 'block';
        setTimeout(() => { treasureEffect.style.display = 'none'; }, 1000);
        setTimeout(() => {
          const newPosition = Math.min(position + 2, mazeConfig.length - 1);
          gameState.playerPositions[playerId] = newPosition;
          // 逐步移动到新位置
          movePlayer();
        }, 1000);
      }
      else if (cell.type === 'trap') {
        // 临时显示陷阱
        if(cellDiv) { cellDiv.innerHTML = '💣'; setTimeout(()=>{cellDiv.innerHTML='';}, 1200); }
        showParticles(player, '💥', '踩中陷阱！后退3步');
        const trapEffect = document.getElementById('trap-effect');
        trapEffect.style.display = 'block';
        setTimeout(() => { trapEffect.style.display = 'none'; }, 1000);
        setTimeout(() => {
          const newPosition = Math.max(position - 3, 0);
          gameState.playerPositions[playerId] = newPosition;
          movePlayer();
          setTimeout(() => { endTurn(); }, 1000);
        }, 1000);
      }
      else if (cell.type === 'end') {
        gameState.gameActive = false;
        showGameMessage(`玩家${playerId}获胜！`, `恭喜玩家${playerId}第一个到达终点！`);
      }
      else {
        endTurn();
      }
    }
    function endTurn() {
      gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1;
      gameState.turnCount++;
      updateUI();
      if(gameState.currentPlayer===2 && gameState.gameActive){
        setTimeout(()=>{ rollDice(); }, gameState.aiDelay);
      } else {
        document.getElementById('roll-btn').disabled = false;
      }
    }
    function showParticles(element, emoji, text) {
      const anim = document.getElementById('particle-anim');
      const rect = element.getBoundingClientRect();
      const containerRect = document.querySelector('.maze-container').getBoundingClientRect();
      const x = rect.left - containerRect.left + rect.width/2;
      const y = rect.top - containerRect.top + rect.height/2;
      for (let i = 0; i < 12; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        p.textContent = emoji;
        p.style.left = x + 'px';
        p.style.top = y + 'px';
        p.style.color = emoji === '💰' ? '#fbbf24' : '#ef4444';
        p.style.fontSize = (1.2 + Math.random() * 0.8) + 'rem';
        p.style.animationDelay = (i * 0.1) + 's';
        anim.appendChild(p);
        setTimeout(() => { p.remove(); }, 1500);
      }
      if (text) {
        const textP = document.createElement('div');
        textP.className = 'particle';
        textP.textContent = text;
        textP.style.left = x + 'px';
        textP.style.top = (y - 40) + 'px';
        textP.style.color = '#fff';
        textP.style.fontSize = '1.2rem';
        textP.style.fontWeight = 'bold';
        textP.style.textShadow = '0 0 5px #000';
        anim.appendChild(textP);
        setTimeout(() => { textP.remove(); }, 1500);
      }
    }
    function showGameMessage(title, text) {
      const message = document.getElementById('game-message');
      document.getElementById('message-title').textContent = title;
      document.getElementById('message-text').textContent = text;
      message.style.display = 'block';
    }
    document.getElementById('roll-btn').addEventListener('click', function(){
      if(gameState.currentPlayer===1) rollDice();
    });
    document.getElementById('restart-btn').addEventListener('click', initGame);
    window.addEventListener('load', initGame);

    // ========== 消消乐玩法 ==========
    const match3Colors = ['red','blue','green','yellow','purple'];
    let match3Board = [];
    let match3Score = 0;
    let match3Selected = null;
    let match3Timer = null, match3Time = 60, match3TimeLeft = 60;
    let match3Started = false;
    function startMatch3Timer() {
      if(!match3Started) return;
      match3TimeLeft = match3Time;
      document.getElementById('match3Timer').textContent = match3TimeLeft+'s';
      if(match3Timer) clearInterval(match3Timer);
      match3Timer = setInterval(()=>{
        match3TimeLeft--;
        document.getElementById('match3Timer').textContent = match3TimeLeft+'s';
        if(match3TimeLeft<=0){
          clearInterval(match3Timer);
          setTimeout(()=>{alert('时间到！你的分数：'+match3Score);match3Started=false;document.getElementById('match3StartBtn').style.display='inline-block';},200);
        }
      },1000);
    }
    function initMatch3() {
      match3Score = 0;
      document.getElementById('match3Score').textContent = '分数：0';
      match3Board = [];
      for(let y=0;y<8;y++){
        let row=[];
        for(let x=0;x<8;x++){
          row.push(match3Colors[Math.floor(Math.random()*match3Colors.length)]);
        }
        match3Board.push(row);
      }
      renderMatch3();
      startMatch3Timer();
    }
    function renderMatch3() {
      const board = document.getElementById('match3Board');
      board.innerHTML = '';
      for(let y=0;y<8;y++){
        for(let x=0;x<8;x++){
          const cell = document.createElement('div');
          cell.className = 'match3-cell ' + match3Board[y][x];
          cell.dataset.x = x;
          cell.dataset.y = y;
          if(match3Selected && match3Selected.x===x && match3Selected.y===y) cell.classList.add('selected');
          cell.onclick = function() { selectMatch3(x,y); };
          board.appendChild(cell);
        }
      }
    }
    function selectMatch3(x,y) {
      if(!match3Selected) {
        match3Selected = {x,y};
        renderMatch3();
        return;
      }
      const dx = Math.abs(match3Selected.x-x), dy = Math.abs(match3Selected.y-y);
      if((dx===1&&dy===0)||(dx===0&&dy===1)) {
        swapMatch3(match3Selected.x,match3Selected.y,x,y);
        match3Selected = null;
      } else {
        match3Selected = {x,y};
      }
      renderMatch3();
    }
    function swapMatch3(x1,y1,x2,y2) {
      const tmp = match3Board[y1][x1];
      match3Board[y1][x1] = match3Board[y2][x2];
      match3Board[y2][x2] = tmp;
      if(!checkMatch3()) {
        // 无法消除则换回来
        setTimeout(()=>{
          const tmp2 = match3Board[y1][x1];
          match3Board[y1][x1] = match3Board[y2][x2];
          match3Board[y2][x2] = tmp2;
          renderMatch3();
        }, 300);
      }
    }
    function checkMatch3() {
      let matched = [];
      // 横向
      for(let y=0;y<8;y++){
        let count=1;
        for(let x=1;x<8;x++){
          if(match3Board[y][x]===match3Board[y][x-1]) count++;
          else count=1;
          if(count>=3) {
            for(let k=0;k<count;k++) matched.push({x:x-k,y});
          }
        }
      }
      // 纵向
      for(let x=0;x<8;x++){
        let count=1;
        for(let y=1;y<8;y++){
          if(match3Board[y][x]===match3Board[y-1][x]) count++;
          else count=1;
          if(count>=3) {
            for(let k=0;k<count;k++) matched.push({x,y:y-k});
          }
        }
      }
      if(matched.length>0) {
        matched.forEach(({x,y})=>{
          match3Board[y][x]=null;
        });
        match3Score += matched.length*10;
        document.getElementById('match3Score').textContent = '分数：'+match3Score;
        setTimeout(()=>{
          dropMatch3();
        }, 300);
        return true;
      }
      return false;
    }
    function dropMatch3() {
      for(let x=0;x<8;x++){
        let empty=[];
        for(let y=7;y>=0;y--){
          if(match3Board[y][x]==null) empty.push(y);
          else if(empty.length>0) {
            let ny=empty.shift();
            match3Board[ny][x]=match3Board[y][x];
            match3Board[y][x]=null;
            empty.push(y);
          }
        }
        for(let i=0;i<empty.length;i++){
          match3Board[empty[i]][x]=match3Colors[Math.floor(Math.random()*match3Colors.length)];
        }
      }
      renderMatch3();
      setTimeout(()=>{checkMatch3();}, 300);
    }
    document.getElementById('match3Reset').onclick=initMatch3;
    window.addEventListener('load', initMatch3);

    // ========== 元素连锁反应（金色球排列） ==========
    const chainLevels = [
      [ [0,0,0,0,0], [0,1,0,1,0], [0,0,1,0,0], [0,1,0,1,0], [0,0,0,0,0] ],
      [ [1,0,1,0,1], [0,1,0,1,0], [1,0,1,0,1], [0,1,0,1,0], [1,0,1,0,1] ],
      [ [0,1,0,1,0], [1,0,1,0,1], [0,1,0,1,0], [1,0,1,0,1], [0,1,0,1,0] ]
    ];
    let chainLevel=0,chainStep=0,balls=[];
    function initChain(){
      const chainCanvas=document.getElementById('chainCanvas');
      chainCanvas.innerHTML='';
      balls=[];chainStep=0;
      document.getElementById('chainLevel').textContent=chainLevel+1;
      document.getElementById('chainTotal').textContent=chainLevels.length;
      document.getElementById('chainStep').textContent=chainStep;
      document.getElementById('chainMove').textContent=chainStep;
      let map=chainLevels[chainLevel];
      for(let i=0;i<5;i++){
        for(let j=0;j<5;j++){
          let ball=document.createElement('div');
          let isActive=!!map[i][j];
          ball.className='energy-ball'+(isActive?' activated':' inactive');
          ball.innerHTML=isActive?'✨':'<span style="color:#23243a;font-size:2rem;">⚡</span>';
          ball.onclick=function(e){
            triggerChain(i,j);
            chainStep++;
            document.getElementById('chainStep').textContent=chainStep;
            document.getElementById('chainMove').textContent=chainStep;
            checkAllGold(e);
          };
          chainCanvas.appendChild(ball);
          balls.push({el:ball,i,j,activated:isActive});
        }
      }
    }
    function triggerChain(i,j){
      balls.forEach(b=>{
        if(Math.abs(b.i-i)+Math.abs(b.j-j)<=1){
          b.activated=!b.activated;
          b.el.classList.toggle('activated',b.activated);
          b.el.classList.toggle('inactive',!b.activated);
          b.el.innerHTML=b.activated?'✨':'<span style="color:#23243a;font-size:2rem;">⚡</span>';
        }
      });
    }
    function checkAllGold(e){
      if(balls.every(b=>b.activated)){
        setTimeout(()=>{
          showParticles(e.clientX||200,e.clientY||200,'✨',36);
          setTimeout(()=>{alert('🎉 全屏金色达成！');initChain();},400);
        },200);
      }
    }
    document.getElementById('chainReset').onclick=initChain;
    document.getElementById('chainNext').onclick=function(){chainLevel=(chainLevel+1)%chainLevels.length;initChain();};
    window.addEventListener('load', initChain);

    // ========== 规则问号浮层 ==========
    const rulesBtn = document.getElementById('rulesBtn');
    const rulesPop = document.getElementById('rulesPop');
    rulesBtn.addEventListener('mouseenter',()=>{rulesPop.style.display='block';});
    rulesBtn.addEventListener('mouseleave',()=>{rulesPop.style.display='none';});
    rulesPop.addEventListener('mouseenter',()=>{rulesPop.style.display='block';});
    rulesPop.addEventListener('mouseleave',()=>{rulesPop.style.display='none';});

    // ========== 消消乐开始按钮 ==========
    document.getElementById('match3StartBtn').onclick = function(){
      match3Started = true;
      this.style.display='none';
      initMatch3();
    };

    // ========== 加载游戏 ==========
    window.addEventListener('load',()=>{drawMazePath();createMazeGrid();});
  </script>
</body>
</html> 